<template>
    <div class="app-header" v-if="$route.meta.showTitle">
        <!-- <x-header slot="header"
         :title="$route.meta.title"
         :left-options="{showBack:$route.meta.showBack}"
         :transition="headerTransition">
         </x-header> -->
         <van-nav-bar
         >
          <van-row slot="title">
            <van-col span="4" @click.native="onClickLeft">
              <template v-if="$route.meta.leftConfig">
                <van-icon :name="$route.meta.leftConfig.icon" />
                <p class="icon-label">{{location}}</p>
              </template>
              <template v-else>
                <van-icon name="arrow-left" :class="{'nolable':!$route.meta.leftConfig}"/>
              </template>
            </van-col>
            <van-col span="16">
              <van-col span="24" class="search-box" v-if="$route.meta.showSearch">
                <van-col span="4">
                  <van-icon name="search" />
                </van-col> 
                <van-col span="20">
                  <input type="text" placeholder="请输入商品名称" readonly />
                </van-col> 
              </van-col>
              <van-col span="24" v-else>
                {{$route.meta.title}}
              </van-col>
            </van-col>
            <van-col span="4" @click.native="onClickRight">
              <template v-if="$route.meta.rightConfig">
                <van-icon v-if="$route.meta.rightConfig.icon" :name="$route.meta.rightConfig.icon" :class="{'nolable':!$route.meta.iconLable}"/>
                <p class="icon-label">{{$route.meta.rightConfig.iconLable}}</p>
              </template>
              <template v-else>
                <van-icon name="wap-nav" />
                <p class="icon-label">产品库</p>
              </template>
              
            </van-col>
          </van-row>
         </van-nav-bar>
    </div>
   
</template>

<script>
import { NavBar,Icon,Search,Row, Col,} from 'vant'

export default {
  name:'AppHeader',
  components: {
    [NavBar.name]: NavBar,
    [Icon.name]: Icon,
    [Row.name]: Row,
    [Search.name]: Search,
    [Col.name]: Col,
    
  },
  computed: {
    headerTransition () {
      return this.direction === 'forward' ? 'vux-header-fade-in-right' : 'vux-header-fade-in-left'
    },
  },
  data () {
    return {
      searchVal:'',
      location:'定位中',
    }
  },
  methods:{
    onClickLeft(){
      if(this.$route.meta.leftConfig&&this.$route.meta.leftConfig.icon=='location'){
        this.location='广州市'
      }else{
        let path=this.$route.query.form||this.$route.meta.backUrl
        if(path){
          this.$router.replace(path);
        }else{
          this.$router.go(-1);
        }
      }
      
    },
    onClickRight(){
      if(this.$route.meta.rightConfig){
        if(this.$route.meta.rightConfig.go){
          this.$router.push(this.$route.meta.rightConfig.go);
        }else if(this.$route.meta.rightConfig.click){
          console.log(this.$route.meta.rightConfig.click)
          this.$zq.bus.$emit(this.$route.meta.rightConfig.click)
        }
        
      }else{
        this.$router.push('/goodsType');
      }
      
    },
    onSearch(){},
    onCancel(){},
    getlocation(){
      this.location='广州市';
    }
  },
  mounted(){
    this.getlocation();
  }
}
</script>

<style lang="less">
.app-header{position:absolute;top:0;left:0;width:100%;z-index:100;
  .van-nav-bar{background-color:#6b5c80;color:#fff100;
    .van-col-4{
      height:100%;
      .van-icon{display:block;margin-top:6px;color:#fff100;
        &+.icon-label{line-height:20px;font-size:12px;}
      }
      .icon-label{font-size:14px;height:20px;line-height:46px;width:100%;}
      .nolable{margin-top:14px;font-size:18px;}
    }
    .search-box{padding:0;background-color:#fff;overflow:hidden;border-radius:4px;height:30px;margin-top:8px;
      input{
        display: block;
            width: 100%;
            height:30px;
            line-height:30px;
            padding: 0;
            font-size: 14px;
            color: #666;
            border: none;
      }
    }
  }
  .van-hairline--top-bottom::after{border-color:#6b5c80;}
}
</style>
